<template>
	<view class="activityPgae">
		<view class="header-view" :style="{height:CustomBarRpx + 540 + 'rpx'}">
			<view class="top-view" :style="{height:CustomBarRpx +'rpx',paddingTop:StatusBarRpx+'rpx'}">
				<view class="sub-view">
					<view class="sub-view-left">
						<u-icon name="arrow-left" color='#fff' @click="back"></u-icon>
					</view>
					<view class="sub-view-center">
						 {{ $t('邀请好友') }}
					</view>
					<view class="sub-view-right"></view>
				</view>
			</view>
			<view class="top-b-view">
				<!-- #ifdef MP-WEIXIN -->
				<button class="share-btn top-b-view-box" open-type="share" @click="onShareAppMessage">
					{{ $t('邀请好友') }}
				</button>
				<view class="top-b-view-box" @click="sharePoster">{{ $t("生成分享海报") }}</view>
				<!-- #endif -->

				<!-- #ifdef APP-PLUS -->
				<view class="top-b-view-box" @click="appShare('WXSceneSession')">{{ $t('邀请好友') }}</view>
				<view class="top-b-view-box" @click="sharePoster">{{ $t("生成分享海报") }}</view>
				<!-- #endif -->
				
				<!-- #ifdef H5 -->
				<view class="top-b-view-box" @click="sharePoster">{{ $t("生成分享海报") }}</view>
				<!-- #endif -->
				<!-- <view class="top-b-view-box">邀请好友</view>
				<view class="top-b-view-box">生成分享海报</view> -->
			</view>
		</view>

		<view class="box-view">
			<view class="box-view-1">
				<view class="box-view-1-0">
					<image :src="userInfo.image" mode=""></image>
				</view>
				<view class="box-view-1-1">
					<view class="name">{{userInfo.nickname}}</view>
					<view class="shareCode">
						{{ $t("邀请码") }}：{{userInfo.share_ma}}
						<view class="copy-text" @click="copyInviteCode(userInfo.share_ma)">
							{{ $t("复制") }}
						</view>
					</view>
				</view>
			</view>
			<view class="box-view-2">
				<view class="price">
					<text>{{ userInfo.team_income_sum }}</text>元
				</view>
				<view class="shouyi-btn">{{ $t("达人收益") }}</view>
			</view>
		</view>

		<view class="card-box">
			<view class="card-box-title">
				<view class="card-box-title-left"></view>
			</view>
			<view class="card-box-content">
				<view class="card-box-item">
					<text class="item-0">{{ userInfo.xj_count }}人</text>
					<text class="item-1">{{ $t("已邀请") }}</text>
					<view class="item-2" @click="$.to('/pagesA/pages/my/myTeam')">{{ $t("查看详情") }} ></view>
				</view>
				<view class="card-box-item">
					<text class="item-0">{{ userInfo.team_income_sum }}元</text>
					<text class="item-1">{{ $t("当前收益") }}</text>
					<view class="item-2" @click="$.to('/pagesA/pages/my/currency?sta=1')">{{ $t("查看详情") }} ></view>
				</view>
				<view class="card-box-item">
					<text class="item-0">{{ userInfo.balance }}元</text>
					<text class="item-1">{{ $t("可提现收益") }}</text>
					<view class="item-2" @click="$.to('/pagesA/pages/my/currency?sta=1')"> {{ $t("查看详情") }}></view>
				</view>
			</view>
		</view>

		<view class="card-box">
			<view class="card-box-title">
				<view class="card-box-title-left title-left-1"></view>
			</view>
			<view class="card-box-content card-box-content-1">
				<view class="content-1-item">
					<view class="content-1-item-img">
						<image src="https://img.alicdn.com/imgextra/i4/2215984279448/O1CN01C19mOQ2JfEtb8mzzE_!!2215984279448.png" mode=""></image>
					</view>
					<view class="content-1-item-title">{{ $t("发送邀请链接给微信好友") }}</view>
				</view>
				<view class="content-1-item">
					<view class="content-1-item-img">
						<image src="https://img.alicdn.com/imgextra/i4/2215984279448/O1CN01C19mOQ2JfEtb8mzzE_!!2215984279448.png" mode=""></image>
					</view>
					<view class="content-1-item-title">{{ $t("发送邀请链接到微信群") }}</view>
				</view>
				<view class="content-1-item">
					<view class="content-1-item-img">
						<image src="https://img.alicdn.com/imgextra/i4/2215984279448/O1CN01C19mOQ2JfEtb8mzzE_!!2215984279448.png" mode=""></image>
					</view>
					<view class="content-1-item-title">{{ $t("发送邀请海报到朋友圈") }}</view>
				</view>
			</view>
		</view>


		<view class="card-box">
			<view class="card-box-title">
				<view class="card-box-title-left title-left-2"></view>
			</view>
			<view class="card-box-content-2">
				<view>{{ $t("1、邀请身边的人，成功率会提升，解锁更多福利") }}</view>
				<view>{{ $t("2、分享3个以上微信群，邀请成功率会提升到爆表，火力全开") }}</view>
				<view>{{ $t("3、如果在微信分享是弹出“发生异常、无法分享”的提示，只需要将微信退出重新登录，就可以正常分享。") }}</view>
				<view>{{ $t("4、如您的好友从分享页进入，您也可以请他绑定您的邀请码(福利码)，进行绑定。") }}</view>
				<view>{{ $t("5、提成奖励将以余额形式发放") }}</view>
			</view>
		</view>

		<u-popup v-model="showPoster" mode="center" background="transparent">
			<view class="poster-box">
				<view class="img-box">
					<image :src="posterImage" mode="widthFix" style="width: 100%;"></image>
				</view>
				<!-- <view style="width: 500rpx;">
					<image :src="posterImage" class="image" mode="widthFix"  style=""/>
				</view> -->
				<view class="btn-share">
					<view class="btn-share-0" @tap="saveImage">{{ $t("下载分享到朋友圈") }}</view>
					<view class="btn-share-1" @tap="copy">{{ $t("复制推广链接") }}</view>
					<!-- <view class="button" @tap="saveImage">保存海报</view>
					<view class="button" @tap="showPoster=false">关闭海报</view> -->
				</view>

			</view>
		</u-popup>
		<PosterCanvas ref="childCanvas" @handleSuccess='canvasSuccess' :h5LocalPosterCover='h5LocalPosterCover'
			:h5Url="url" :localPosterCover="localPosterCover" :shareUrl="codeShareUrl" :appShareUrl="appShareUrl" />
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import {
		saveImageToPhotosAlbum
	} from '@/uni_modules/sakura-canvas/js_sdk/utils/util'
	import PosterCanvas from '@/components/PosterCanvas.vue'
	import config from "@/utils/config.js"
	export default {
		components: {
			PosterCanvas
		},
		data() {
			return {
				userInfo: {
					image: null,
					share_ma: null,
					nickname: null
				},
				share_ma: '',
				url: '',
				share_bg: '',
				// userInfo: null,
				show: false,
				showPoster: false,
				posterImage: '',
				codeShareUrl: '', // 小程序二维码
				appShareUrl: '', // app分享
				localPosterCover: '',
				h5LocalPosterCover: '',
				mainbg: ''
			}
		},
		onLoad() {
			// this.userInfo = {
			// 	...this.userInfo,
			// 	...uni.getStorageSync('user')
			// }
			if (!uni.getStorageSync("user")) {
				uni.redirectTo({
					url: '/pagesB/pages/my/login'
				})
			} else {
				this.share_ma = uni.getStorageSync("user").share_ma
			}
			this.get_share_data();
			this.get_poster()
			// this.getwxacod()
			this.get_my_share_url()
		},
		onShow() {
			this.getUser()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			getwxacod() {
				this.$http({
					url: "https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKENl",
				}).then(res => {

				})
			},
			handleInvite() {
				this.show = true
			},
			getBase64(imgUrl) {
				let _this = this
				var xhr = new XMLHttpRequest()
				xhr.open('get', imgUrl, true)
				xhr.responseType = 'blob'
				xhr.onload = function() {
					if (this.status == 200) {
						var blob = this.response
						let oFileReader = new FileReader()
						oFileReader.onloadend = function(e) {
							_this.h5LocalPosterCover = e.target.result;
						}
						oFileReader.readAsDataURL(blob)
					}
				}
				xhr.send()
			},
			savePicture(url) {
				var image = new Image();
				image.crossOrigin = 'anonymous'
				image.onload = function() {

					// 创建隐藏的可下载链接
					var eleLink = document.createElement('a');
					eleLink.download = (+new Date()) + '.jpg';
					eleLink.style.display = 'none';
					// 图片转base64地址
					var canvas = document.createElement('canvas');
					var context = canvas.getContext('2d');
					canvas.width = this.naturalWidth;
					canvas.height = this.naturalHeight;
					context.drawImage(this, 0, 0);
					// 如果是PNG图片，则canvas.toDataURL('image/png')
					eleLink.href = canvas.toDataURL('image/jpeg');
					// 触发点击
					document.body.appendChild(eleLink);
					eleLink.click();
					// 然后移除
					document.body.removeChild(eleLink);
				}
				console.log(url, '111111111111nnn')
				this.h5LocalPosterCover = url;
			},
			get_share_data() {
				this.$http({
					url: "api/common/get_general",
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.shareUrl = '/pagesB/pages/my/login?share_ma=' + this.share_ma

						this.mainbg = res.data.data.share_bg
						// 	#ifdef APP-PLUS || MP-WEIXIN
						uni.getImageInfo({
							src: res.data.data.share_ewm_bg,
							success: (image) => {
								this.localPosterCover = image.path;
							},
						});
						// #endif
						// 	#ifdef H5
						this.getBase64(res.data.data.h5_share_ewm_bg)
						// #endif
					}
				}).catch(err => {});
			},
			//获取我的专属邀请URL
			get_my_share_url() {
				this.$http({
					url: "api/common/get_my_share",
					data: {
						share_ma: this.share_ma,
						// #ifdef H5
						type: 0,
						// #endif

						// #ifdef MP-WEIXIN
						type: 1,
						// #endif

						// #ifdef APP-PLUS
						type: 2,
						// #endif
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.url = res.data.data;
						this.appShareUrl = res.data.data;
					}
				}).catch(err => {});
			},
			// 复制链接
			copy() {
				if (this.url == "") {
					this.$tip.tip("出错了，请稍后再试")
					return
				}
				let dizhi = decodeURIComponent(this.url)
				uni.setClipboardData({
					data: dizhi,
					success: () => {
						uni.showToast({
							title: '复制成功',
							duration: 800,
							icon: 'success'
						});
					}
				});
				// uni.setClipboardData({
				// 	data: dizhi,
				// 	success: () => {

				// 	}
				// });
			},
			appShare(scene) {
				if (this.url == "") {
					this.$tip.tip("出错了，请稍后再试")
					return
				}
				let dizhi = decodeURIComponent(this.url)
				uni.share({
					provider: "weixin", //分享服务提供商（即weixin|qq|sinaweibo）
					scene: scene, //场景，可取值参考下面说明。
					type: 0, //分享形式
					href: dizhi,
					title: '邀你一起开盲盒~',
					imageUrl: this.mainbg, //图片地址
					success: (res) => {
						this.show = false //成功后关闭底部弹框
					},
					fail: (err) => {
						uni.showToast({
							title: '分享失败',
							icon: 'none',
							duration: 2000
						})
						this.show = false
					}
				});
			},

			// 获取小程序二维码
			get_poster() {
				this.$http({
					url: 'api/member/get_wxamp_share_qrcode'
				}).then(res => {
					if (res.data.code == 1) {
						this.codeShareUrl = res.data.data.qecode
						console.log(this.codeShareUrl, '22')
					}
					// this.codeShareUrl 
				})
			},
			getUser() {
				this.$http({
					url: "api/member/get_user_info",
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.userInfo = res.data.data
					}
				}).catch(err => {});
			},
			sharePoster() {
				uni.showLoading({
					title: "生成中"
				})
				this.show = false
				this.$refs.childCanvas.drawPoster().then(() => {
					uni.hideLoading()
				})
			},
			canvasSuccess(param) {
				const {
					showPoster,
					posterImage
				} = param
				this.showPoster = showPoster
				this.posterImage = posterImage
			},
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				return {
					title: '邀请好友得豪礼',
					path: '/pagesB/pages/tabBar/home?share_ma=' + this.share_ma
				}
			},
			async saveImage() {
				// #ifdef H5
				uni.showToast({
					title: 'H5不支持API保存图片,请使用长按保存!!!',
					icon: 'none'
				})
				return
				// #endif
				const res = await saveImageToPhotosAlbum(this.posterImage)
				if (!res.success) {
					uni.showToast({
						title: '保存图片失败!!!',
						icon: 'none'
					})
					return
				}
				this.showPoster = false
			},
			copyInviteCode(text){
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功',
							duration: 800,
							icon: 'success'
						});
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #0D0D0D;
	}
</style>

<style lang="scss" scope>
	.header-view {
		background-image: url('https://img.alicdn.com/imgextra/i2/2215984279448/O1CN01oQkvg72JfEteHXLOW_!!2215984279448.jpg');
		background-size: 100% 100%;

		.top-view {
			display: flex;
			box-sizing: border-box;
			background: transparent;
			width: 100%;

			.sub-view {
				width: 100%;
				align-items: center;
				display: flex;
				justify-content: space-between;
				padding: 0rpx 32rpx 0rpx 32rpx;
				height: 88rpx;
				box-sizing: border-box;
			}

			.sub-view-left,
			.sub-view-right {
				width: 100rpx;
			}

			.sub-view-right {
				display: flex;
				justify-content: flex-end;
			}

			.sub-view-center {
				color: #fff;

				image {
					width: 180rpx;
					height: 44rpx;
				}
			}
		}

		.top-b-view {
			height: 500rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding: 0 30rpx;

			.top-b-view-box {
				color: #999;
				width: 320rpx;
				height: 90rpx;
				background-image: url('https://img.alicdn.com/imgextra/i3/2215984279448/O1CN01Jc69lY2JfEt2sFHdt_!!2215984279448.png');
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
			}
		}
	}

	.box-view {
		width: 690rpx;
		height: 400rpx;
		background-image: url('https://z4a.net/images/2023/08/10/8.png');
		background-size: 100% 100%;
		margin: 0 auto;
		color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.box-view-1 {
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			margin-left: 20rpx;

			.box-view-1-0 {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.box-view-1-1 {
				margin-left: 20rpx;

				.name {
					font-size: 30rpx;
					color: #fff;
				}

				.shareCode {
					font-size: 22rpx;
					color: #999;
					margin-top: 10rpx;
					display: flex;
					align-items: center;

					.copy-text {
						padding: 2rpx 10rpx;
						border-radius: 2rpx;
						overflow: hidden;
						margin-left: 20rpx;
						color: #999;
						font-size: 22rpx;
						background-color: #474747;
					}
				}
			}


		}

		.box-view-2 {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #999;

			.price {
				font-size: 26rpx;

				text {
					color: #fff;
					font-size: 46rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}
			}

			.shouyi-btn {
				font-size: 34rpx;
				color: #000000;
				width: 300rpx;
				height: 70rpx;
				background-color: #00fdeb;
				margin-top: 40rpx;
				font-weight: bold;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
			}
		}
	}

	.card-box {
		margin: 0 auto;
		width: 690rpx;
		overflow: hidden;
		box-sizing: border-box;
		margin-top: 50rpx;

		&-title {
			height: 60rpx;
			display: flex;
			justify-content: space-between;

			&-left {
				width: 250rpx;
				height: 60rpx;
				background-image: url('https://z4a.net/images/2023/08/10/4.png');
				background-size: 100% 100%;
			}

			.title-left-1 {
				background-image: url('https://z4a.net/images/2023/08/10/5.png');
			}

			.title-left-2 {
				background-image: url('https://z4a.net/images/2023/08/10/9.png');
			}
		}

		&-content {
			width: 690rpx;
			box-sizing: border-box;
			border: 1px solid #00fdeb;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 30rpx 0;
			margin-top: 30rpx;

			.card-box-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: calc(100% / 3);
				box-sizing: border-box;

				.item-0 {
					font-size: 28rpx;
					color: #00fdeb;
				}

				.item-1 {
					font-size: 24rpx;
					color: #999;
					margin-top: 16rpx;
				}

				.item-2 {
					width: 150rpx;
					height: 40rpx;
					border-radius: 20rpx;
					background-color: #00fdeb;
					color: #999;
					font-size: 20rpx;
					margin-top: 14rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		
		&-content-1{
			display: flex;
			justify-content: space-around;
			.content-1-item{
				display: flex;
				flex-direction: column;
				align-items: center;
				.content-1-item-img{
					width: 120rpx;
					height: 120rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.content-1-item-title{
					width: 160rpx;
					text-align: center;
					font-size: 24rpx;
					color: #00fdeb;
					margin-top: 20rpx;
				}
			}
			
		}
		
		&-content-2 {
			width: 690rpx;
			box-sizing: border-box;
			border: 1px solid #00fdeb;
			border-radius: 20rpx;
			padding: 20rpx 20rpx;
			margin-top: 30rpx;
			font-size: 24rpx;
			color: #999;



			view {
				line-height: 40rpx;
				padding: 6rpx 0;
			}
		}
	}

	.share-btn {
		margin: 0;
		padding: 0;
		background-color: transparent;
	}

	.share-btn::after {
		border: none;
	}

	.poster-box {
		width: 600rpx;

		.img-box {
			width: 600rpx;
			overflow: hidden;
		}

		.btn-share {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			overflow: hidden;
			.btn-share-0{
				width: 300rpx;
				height: 60rpx;
				font-size: 34rpx;
				color: #000;
				border-radius: 30rpx;
				background-color: #00fdeb;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 30rpx;
			}
			.btn-share-1{
				font-size: 34rpx;
				color: #00fdeb;
				margin-top: 30rpx;
			}
			// display: flex;
			// justify-content: space-between;
			// box-sizing: border-box;
			// padding: 20rpx 80rpx;

			// .button {
			// 	background: #845EC2;
			// 	padding: 0 30rpx;
			// 	height: 70rpx;
			// 	font-size: 26rpx;
			// 	color: #fff;
			// 	border-radius: 30rpx;
			// 	text-align: center;
			// 	line-height: 70rpx;
			// }
			
		}
	}
</style>